<template>
	<!-- 订单查询页面 -->
	<view class="orderQuery">
		<view class="orderQuery-header">
			<view class="orderQuery-title">— 自定义查询 —</view>
			<view class="datequery">
				<picker class="pickerDate start" mode="date" @change="starTime">
					<view>
						开始时间：<text class="time">{{beginDate}}</text>
					</view>
				</picker>
				<picker class="pickerDate" mode="date" @change="endTime">
					<view>
						结束时间：<text class="time">{{endDate}}</text>
					</view>
				</picker>
			</view>
		</view>
		<view class="soonQuery" @tap="soonSelect">立即查询</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				beginDate: "", //开始时间
				endDate: "", //结束时间
				type:"",//1:用户订单；2：打包核销订单
			};
		},
		onLoad(e) {
			console.log(e.title)
			if(e.title=="用户订单"){
				this.type = 1
			}else{
				this.type = 2
			}
		},
		onShow() {
			this.getnowDate()
		},
		methods: {
			starTime(e) { //开始时间
				// console.log(e.detail.value)
				this.beginDate = e.detail.value
			},
			endTime(e) { //结束时间
				this.endDate = e.detail.value
			},
			getnowDate() {
				// 创建 Date 对象
				const date = new Date();
				// 获取年、月、日
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
				const day = date.getDate();

				// 拼接日期字符串
				const formattedDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);

				// 更新数据
				this.beginDate = formattedDate;
				this.endDate = formattedDate
			},
			soonSelect(){
				// console.log("立即查询")
				if(this.type==1){//用户订单页面
					uni.navigateTo({
						url:`/otherPages/userOrder/userOrder?type=${this.type}&startDate=${this.beginDate}&endDate=${this.endDate}`
					})
				}else{//打包核销订单
					uni.navigateTo({
						url:`/otherPages/packOrder/packOrder?type=${this.type}&startDate=${this.beginDate}&endDate=${this.endDate}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderQuery {
		padding: 0 20rpx;
		box-sizing: border-box;

		.orderQuery-header {
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.orderQuery-title {
				font-weight: bold;
				margin: 40rpx 0;
				text-align: center;
			}
		}

		.datequery {
			display: flex;
			padding-bottom: 20rpx;
			font-size: 26rpx;
			.pickerDate{
				.time{
					color: #00b388;
					
				}
			}
			.start{
				margin-right: 50rpx;
			}
		}
		.soonQuery{
			width: 80%;
			padding: 20rpx 0;
			text-align: center;
			background: #00b388;
			color: #fff;
			margin: 0 auto;
			margin-top: 30rpx;
			border-radius: 30rpx;
		}
	}
</style>